<!--
 * @Description: 审批节点展示
 * @Author: wangwangwang
 * @Date: 2020-11-17 09:51:36
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-03-18 10:47:19
-->
<template>
  <section>
    <div class="flows-node-container">
      <div class="flows-node-title">流转详情</div>
      <el-table border :header-cell-style="{ background: '#f3f6f9' }" style="width:100%" :data="tableData" :span-method="objectSpanMethod">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="nodeName" label="节点名称"></el-table-column>
        <el-table-column prop="userName" label="处理人">
        </el-table-column>
        <el-table-column label="多人审批类型">
          <template slot-scope="scope">
            <span>{{applyTypeList[scope.row.multiApprovalType]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{scope.$index===0?'-':flowsStatus[scope.row.approvalStatus]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="approvalOptions" label="审批意见">
        </el-table-column>
        <el-table-column prop="handlerTime" label="操作时间">
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>
<script>
export default {
  props: ['tableData'],
  watch: {
    tableData(data) {
      this.getSpanArr(data);
    }
  },
  data() {
    return {
      applyTypeList: ['-', '依次审批', '会签', '或签'],
      flowsStatus: ['未审批', '待处理', '审批通过', '审批不通过', '发起人已撤销'],
      spanArr: [],
    }
  },
  methods: {
    getSpanArr(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0
        } else {
          if (data[i].nodeName === data[i - 1].nodeName) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
      }
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 3) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
.flows-node-container {
  .flows-node-title {
    font-size: calc(#{$font_size} + 4px);
    padding: 20px 0 15px;
  }
}
</style>

